<script setup lang="ts">
import { onMounted, reactive, ref } from "@vue/runtime-core";
import picture4 from "@/assets/img/bg4.jpg";
import picture5 from "@/assets/img/bg5.jpg";
import picture6 from "@/assets/img/bg6.jpg";
import picture7 from "@/assets/img/bg7.jpg";
const pictures = reactive([
  { name: '第二张', value: picture4 },
  { name: '第三张', value: picture5 },
  { name: '第四张', value: picture6 },
  { name: '第五张', value: picture7 }
])
</script>

<template>
  <div class="container">
    <div class="carousel">
      <el-carousel height="100vh" arrow="always" :autoplay="false" :loop="true" width="100vw">
        <el-carousel-item v-for="(item, idx) in pictures" :key="idx">
          <el-image class="carousel-img" :src="item.value"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;

  .carousel {
    width: 100%;
    height: 100%;

    .carousel-img {
      width: 100%;
      height: 100%;
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}
</style>